﻿$(function () {
    const { ElTabs, ElForm, ElFormItem, ElInput, ElButton, ElMessage } = ElementPlus;
    const { ref, reactive, computed } = Vue;
    const app = Vue.createApp({
        setup() {
            const state = reactive({
                loginType: 'email',
                username: '',
                password: ''
            })

            const userNamePlaceHolder = computed(() => {
                if (state.loginType === 'email') {
                    return "昵称或邮箱";
                } else if (state.loginType === 'phone') {
                    return "手机号";
                }
            })

            const checkUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('尚未填写'));
                } else if (state.loginType === 'phone' && !(/^[1][3,4,5,7,8][0-9]{9}$/g.test(value))) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback()
                }
            }

            const ruleFormRef = ref();

            const rules = reactive({
                username: {
                    validator: checkUsername, trigger: 'blur'
                },
                password: [
                    { required: true, message: '尚未填写', trigger: 'blur' },
                    { min: 6, message: '登录密码最少为6位', trigger: 'blur' }
                ]
            })

            const subitForm = ((formEl) => {
                if (!formEl) return;
                formEl.validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type: 'post',
                            url: '/User/Login',
                            data: state,
                            success: (data) => {
                                const { storage, tokenSign } = utils.config;
                                const { status } = data;
                                if (status === 0) {
                                    const { token, role } = data.data;
                                    storage.clear();
                                    storage.setItem(tokenSign,token);
                                    storage.setItem('role',role);
                                    location.href = "/";
                                    ElMessage({
                                        message: '用户登录成功',
                                        type: 'success',
                                    })
                                }
                            }
                        })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            })

            const tabOnChange = () => {
                state.username = ''
            }

            return {
                state,
                userNamePlaceHolder,
                rules,
                tabOnChange,
                ruleFormRef,
                subitForm
            };
        }
    });
    app.use(ElTabs);
    app.use(ElForm);
    app.use(ElFormItem);
    app.use(ElInput);
    app.use(ElButton);
    app.mount('#main-container');
})